import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 创建一个平面贴图几何体
const textureLoader = new THREE.TextureLoader();
const geo = new THREE.PlaneGeometry(256, 256, 4, 4);
textureLoader.load('../../textures/metal.jpg', texture => {
  const mat = new THREE.MeshLambertMaterial({
    map: texture,
    side: THREE.DoubleSide
  });
  // 在创建模型前进行 uv 坐标处理
  console.log(geo);
  geo.faceVertexUvs[0].forEach((face, i) => {
    face.forEach(uv => {
      uv.set(uv.x * Math.pow(.99, i + 1), uv.y * Math.pow(.99, i + 1));
    });
  });
  
  const mesh = new THREE.Mesh(geo, mat);
  scene.add(mesh);
  render();
});

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 400,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
